<template>
  <div class="left">
      <ul>
          <li  v-for="(item,index) in left" :key="index" @click="fn(index)" :class="item.tag?'blue':''">{{item.text}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    data() {
        return {
            left:[
                {text:'管理中心','tag':true},
                {text:'商品管理','tag':false},
                {text:'会员管理','tag':false},
                {text:'订单管理','tag':false},
            ],
            

        }
    },
    methods: {
        fn(index){
            
            this.left.forEach(item=>{
                item.tag=false
            })
            this.left[index].tag=true
           
            this.$emit('myindex',index)
            
        }
    },
}
</script>

<style>
.left{
    width: 20vw;
    height: 100vh;
   background-color: #00152a;
}
.left ul{
    width: 100%;

}
.left li{
    width: 100%;
    height: 50px;
    
    text-align: center;
    line-height: 50px;
    color: #fff;
}
.blue{
    background-color: #0076b8;
}
</style>